<template>
  <view class="address-card" @click="$emit('click')">
    <view class="address-content" v-if="address">
      <view class="address-header">
        <text class="name">{{address.name}}</text>
        <text class="phone">{{address.phone}}</text>
        <text class="default-tag" v-if="address.isDefault">默认</text>
      </view>
      <text class="address-detail">{{address.province}}{{address.city}}{{address.district}}{{address.detail}}</text>
    </view>
    
    <view class="address-empty" v-else>
      <text>请选择收货地址</text>
     <!--  <uni-icons type="right" size="16" color="#999"></uni-icons> -->
    </view>
  </view>
</template>

<script setup>
defineProps({
  address: {
    type: Object,
    default: null
  }
})

defineEmits(['click'])
</script>

<style lang="scss">
.address-card {
  background-color: $white-bg;;
  padding: 30rpx;
  margin-bottom: 20rpx;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 20rpx;
    height: 20rpx;
    border-top: 2rpx solid #999;
    border-right: 2rpx solid #999;
    transform: rotate(45deg);
  }
  
  .address-content {
    .address-header {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;
      
      .name {
        font-size: $font-size-30rpx;
        font-weight: bold;
        margin-right: 20rpx;
      }
      
      .phone {
        font-size: $font-size-28rpx;
        color: $text-color-666;
        margin-right: 20rpx;
      }
      
      .default-tag {
        font-size: 24rpx;
        color: $primary-color;
        border: 1rpx solid $primary-color;
        border-radius: 6rpx;
        padding: 2rpx 8rpx;
      }
    }
    
    .address-detail {
      font-size: 26rpx;
      color: $text-color-666;
      line-height: 1.6;
    }
  }
  
  .address-empty {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80rpx;
    color: #999;
    font-size: $font-size-28rpx;
  }
}
</style>